<template>
  <div>
    <el-row style="margin-bottom:100px">
    <el-col :span="6" >
      <el-statistic title="用户数据" :value="count.user" style="background-color: ;#1890ff" >
        <template #prefix>          
          <el-icon style="background-color:rgb(245, 234, 80);"><UserFilled /></el-icon>
        </template>
      </el-statistic>
    </el-col>
    <el-col :span="6">
      <el-statistic title="员工数" :value="count.staff" >
        
      <template #prefix  >
          <el-icon style="background-color:rgb(110, 245, 80);"><TrendCharts/></el-icon>
        </template>
        </el-statistic>
    </el-col>
    <el-col :span="6">
      <el-statistic :value="count.stadium" >
        <template #title>
          <div style="display: inline-flex; align-items: center">
            场馆数
          </div>
        </template>
        <template #prefix>
          <el-icon style="background-color:rgb(80, 229, 245);"><HomeFilled /></el-icon>
        </template>
        
       
      </el-statistic>
    </el-col>   
    <el-col :span="6">
      <el-statistic title="商户统计" :value="count.stadium">
       
       
        <template #prefix>
          <el-icon style="background-color:rgb(218, 80, 245);"><StarFilled /></el-icon>
        </template>
      </el-statistic>
    </el-col>
    <el-col :span="6" >
      <el-statistic title="运动类型" :value="count.sport" >
        <template #prefix>
          <el-icon><Basketball /></el-icon>
        </template>
      </el-statistic>
    </el-col>
    <el-col :span="6" >
      <el-statistic title="场地统计" :value="count.fields" >
        <template #prefix>
          
          <el-icon style="background-color:rgb(85, 192, 246);"><LocationFilled /></el-icon>
        </template>
      </el-statistic>
    </el-col>
    <el-col :span="6" >
      <el-statistic title="订单统计" :value="count.orders*10" >
        <template #prefix>
          <el-icon style="background-color:rgb(245, 215, 80);"><ShoppingBag /></el-icon>
        </template>
      </el-statistic>
    </el-col>
    <el-col :span="6" >
      <el-statistic title="退款统计" :value="count.orders/2" >
        <template #prefix>
          <el-icon style="background-color:rgb(80, 245, 91);"><Failed /></el-icon>
        </template>
      </el-statistic>
    </el-col>
  </el-row>
    <div id="chart1"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue';
import { CountStaff,CountAll } from '../../api/system.js';
const staff = ref([]);
const count = ref({});
const chart = ref();
const options = ref({
  title: {
    text: '我要运动员工与用户统计',
    left:"center"
  },
  tooltip: {},
  xAxis: {
    data: []
  },
  legend:{data:["员工新增","用户新增"],left:"right"},
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});
CountStaff()
.then(res=>{
  staff.value = res.data.data;
  console.log( res.data.data.map(item=>item.day))
  options.value.xAxis.data = res.data.data.map(item=>item.day);
  options.value.series[0].name="员工新增";
  options.value.series[0].type="line";
  options.value.series[0].smooth=true;
  options.value.series[0].data = staff.value.map(item=>item.staff);
  options.value.series[0].lineStyle={width:4}
  options.value.series[1]={};
  options.value.series[1].name="用户新增";
  options.value.series[1].type="line";
 
  options.value.series[1].smooth=true;
  options.value.series[1].data = staff.value.map(item=>item.user);
  chart.value.setOption(options.value);
})
CountAll()
.then(res=>{
  count.value = res.data.data;

})




onMounted(()=>{
  // 基于准备好的dom，初始化echarts实例
chart.value= echarts.init(document.getElementById('chart1',"light"));
// 绘制图表
chart.value.setOption(options.value);
})

</script>
<style>
#chart1{
  width: 100%;
  height: 260px;
}

 
.el-statistic{
   /* text-align: center; */
    /* background: orange; */
    padding:20px;
    margin: 20px;
    border-radius: 12px;
    padding-left: 100px;
}

.el-statistic__content{
  font-size: 48px;
  position: relative;
}
.el-statistic__head{
  font-size: 24px;
}
.el-statistic__prefix{
  position: absolute;
  left:-64px;
  font-size: 22px;
  top:-30px;
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  background-color: #1890ff;
  color:#fff;
  border-radius: 50%;
  /* display: none; */
}
.el-statistic__prefix .el-icon{
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;  
  color:#fff;
  border-radius: 50%;
}

/* .el-statistic__prefix:nth-child(1){
  background-color: aquamarine;
} */
 
</style>